<template>
	<view class="mine">
		<image class="imgs" src="/static/mine/bjj.png" mode="aspectFill"></image>
		<view class="mine_top">
			<view class="top_box">
				<view class="top_img" @click.stop="show = true">
					<image v-if="userInfo.avatar" :src="http+userInfo.avatar" mode="aspectFill"></image>
					<image v-else src="/static/mine/up.png" mode="aspectFill"></image>
				</view>
				<view class="flex_r">
					<view class="top_text" @click.stop="show = true">
						<text v-if="userInfo.nickname">{{userInfo.nickname}}</text>
						<text v-else>授权用户信息</text>
					</view>
					<view class="">
						<view class="phone" v-if="userInfo.mobile">
							{{userInfo.mobile}}
						</view>
						<button v-else class="btn" type="default" open-type="getPhoneNumber"
							@getphonenumber="getPhoneNumbers">绑定手机号</button>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="c_top">
				<view class="title">
					我的订单
				</view>
				<view class="flexs">
					<view class="" v-for="(item,index) in iconList" :key="index" @click="goOrder(item)">
						<image class="box_img" :src="item.iconpath" mode=""></image>
						<view class="texts">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="fximg">
				<view class="img" v-if="userInfo.distribution == null || userInfo.distribution.status!=2">
					<image src="/static/mine/fx.png" mode=""></image>
					<view class="imgabs">
						<view class="text">
							<view class="t1">
								申请成为分销员
							</view>
							<view class="t2">
								申请成为分销员赚点外快
							</view>
						</view>
						<view class="btn" @click="gouIndex">
							申请加入
						</view>
					</view>
				</view>
				<view class="img" v-if="userInfo.distribution.status == 2">
					<image src="/static/mine/fx1.png" mode=""></image>
					<view class="imgabs1">
						<view class="text">
							<view class="t1">
								账户余额
							</view>
							<view class="t2">
								{{userInfo.member.distribution_price}} <span>元</span>
							</view>
						</view>
						<view class="btn" @click="gouIndex1">
							查看更多
						</view>
					</view>
				</view>
			</view>
			<view class="types">
				<view class="list" :data-i="0" @click="toNav">
					<view class="left">
						<view class="l_img">
							<image src="../../static/mine/wodeshoucang.png" mode=""></image>
						</view>
						<view class="l_text">
							我的收藏
						</view>
					</view>
					<view class="arrows">

					</view>
				</view>
				<view class="list" :data-i="1" @click="toNav">
					<view class="left">
						<view class="l_img">
							<image src="../../static/mine/guanyuwomen.png" mode=""></image>
						</view>
						<view class="l_text">
							关于我们
						</view>
					</view>
					<view class="arrows">

					</view>
				</view>
				<view class="list">
					<view class="left">
						<view class="l_img">
							<image src="../../static/mine/kf.png" mode=""></image>
						</view>
						<view class="l_text">
							在线客服
						</view>
					</view>
					<view class="arrows">

					</view>
					<button open-type="contact" class="btns"></button>
				</view>

				<view class="list" :data-i="2" @click="toNav">
					<view class="left">
						<view class="l_img">
							<image src="../../static/mine/lianxiwomen.png" mode=""></image>
						</view>
						<view class="l_text">
							联系电话：<text>{{phone2}}</text>
						</view>
					</view>
					<view class="arrows">

					</view>
				</view>
				<view class="list" :data-i="3" @click="toNav">
					<view class="left">
						<view class="l_img">
							<image src="../../static/mine/yijianfankui.png" mode=""></image>
						</view>
						<view class="l_text">
							意见反馈
						</view>
					</view>
					<view class="arrows">

					</view>
				</view>
				<view class="list" :data-i="4" @click="toNav">
					<view class="left">
						<view class="l_img">
							<image src="../../static/mine/fapiao.png" mode=""></image>
						</view>
						<view class="l_text">
							发票申请
						</view>
					</view>
					<view class="arrows">

					</view>
				</view>

			</view>
			<view class="sustain">
				<view class="sustain_t" @click="scan">
					黑网客提供技术支持
				</view>
			</view>
		</view>

		<u-popup :show="show" @close="close" @open="open" mode="bottom" :round="10" closeable>
			<view class="pop-userinfo">
				<view class="p-title">
					设置用户信息
				</view>
				<view class="p-con">
					<view class="p-img">
						<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image v-if="userInfo.avatar" :src="http+userInfo.avatar" mode="aspectFill"></image>
							<image v-else src="/static/mine/up.png" mode="aspectFill"></image>
						</button>
					</view>
					<view class="p-name">
						<input type="nickname" class="weui-input" placeholder="请输入昵称" v-model="userInfo.nickname"
							@change="nameConfirm" />
					</view>
				</view>
				<view class="p-btn" @click="setMemberInfo">
					保存
				</view>

			</view>
		</u-popup>
		<uv-tabbar :value="2" class="tab"></uv-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconList: [{
						id: 1,
						name: '全部',
						iconpath: require('../../static/mine/m1.png'),
						status: '',
						index: 0
					},
					{
						id: 2,
						name: '待付款',
						iconpath: require('../../static/mine/m2.png'),
						status: 1,
						index: 1

					},
					{
						id: 3,
						name: '待核销',
						iconpath: require('../../static/mine/m3.png'),
						status: 2,
						index: 2
					},
					{
						id: 4,
						name: '进行中',
						iconpath: require('../../static/mine/m4.png'),
						status: 3,
						index: 3
					},
					{
						id: 5,
						name: '已完成',
						iconpath: require('../../static/mine/m5.png'),
						status: 4,
						index: 4
					},

				],
				show: false,
				http: this.$httpimg,
				user: '',
				phone2: '',
				userInfo: {}
			}
		},
		onShow() {
			this.user = uni.getStorageSync('user')
			this.getUinfo()
		},
		onShareAppMessage(e) {
			return {
				title: '',
				path: '/pages/index/index'
			}
		},
		methods: {
			gouIndex() {
				if(this.userInfo.distribution!=null){
					uni.navigateTo({
						url: '/minepage/result'
					})
				}else{
					uni.navigateTo({
						url: '/minepage/index'
					})
				}
			},
			gouIndex1() {
				uni.navigateTo({
					url: '/minepage/user'
				})
			},
			goOrder(i) {
				uni.navigateTo({
					url: `/pages/mine/order?status=${i.status}&index=${i.index}`
				})
			},
			getUinfo() {
				this.$post('user/index', {
					mid: this.user.id
				}).then(res => {
					if (res.code == 0) {
						this.userInfo = res.data
						uni.setStorageSync('msg', res.data)
					}
				})
				this.$post('user/aboutus', {
					mid: this.user.id
				}).then(res => {
					if (res.code == 0) {
						this.phone2 = res.data.phone
					}
				})
			},
			onChooseAvatar(e) {
				console.log("e ", e);
				let that = this
				let header = {}
				let img = e.detail.avatarUrl
				uni.uploadFile({
					url: that.$webImgUpload2,
					filePath: img,
					name: 'file',
					formData: {},
					header: header,
					success: (res1) => {
						if (res1.statusCode == 200) {
							let url = JSON.parse(res1.data)
							that.userInfo.avatar = url.data.url
						} else {
							uni.showToast({
								title: res1.data.msg,
								icon: "none",
								duration: 1500
							});
						}
					}
				});
			},

			nameConfirm(e) {
				this.userInfo.nickname = e.detail.value
			},
			setMemberInfo() {
				if (this.userInfo.avatar == '') {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					})
				} else if (this.userInfo.nickname == '') {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					})
				} else {
					this.$post('index/setMemberInfo', {
						avatar: this.userInfo.avatar,
						mid: this.user.id,
						nickname: this.userInfo.nickname
					}).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: '设置成功',
								icon: 'none'
							})
							this.getUinfo()
							this.show = false
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}

			},
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			getPhoneNumbers(e) {
				if (e.detail.code) {
					this.$post('index/getWxMobile', {
						code: e.detail.code,
						mid: this.user.id
					}).then(res => {
						if (res.code == 0) {
							this.$post('user/index', {
								mid: this.user.id,
							}).then(r => {
								if (r.code == 0) {
									this.userInfo.mobile = r.data.mobile
									uni.setStorageSync('msg', r.data)
								}
							})
							uni.showToast({
								title: '绑定成功'
							})
						}
					})
				}

			},
			toNav(e) {
				let i = e.currentTarget.dataset.i
				if (i == 0) {
					uni.navigateTo({
						url: 'collect'
					})
				} else if (i == 1) {
					uni.navigateTo({
						url: 'aboutus'
					})
				} else if (i == 2) {
					if (this.phone2 != '') {
						uni.makePhoneCall({
							phoneNumber: this.phone2
						});
					}
				} else if (i == 3) {
					uni.navigateTo({
						url: 'opinion'
					})
				} else if (i == 4) {
					uni.navigateTo({
						url: 'bill'
					})
				}
			}
		}
	}
</script>

<style lang="less">
	image {
		width: 100%;
		height: 100%;
	}

	button::after {
		border: none;
	}

	button {
		padding: 0;
		margin: 0%;
	}

	page {
		background-color: #F8F8F8;
	}

	.sustain {
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		color: #d8d8d8;
		padding: 40rpx;
		box-sizing: border-box;

		.sustain_t {
			height: 40rpx;
			line-height: 40rpx;
		}
	}

	.pop-userinfo {
		padding: 30rpx;

		.p-title {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 32rpx;
			color: #333;
			text-align: center;
			font-weight: bold;
		}

		.p-con {
			padding: 50rpx 0;

			.p-img {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
				border: 2rpx solid #eee;
				margin: 0 auto;
				overflow: hidden;

				.avatar-btn {
					width: 100%;
					height: 100%;
					padding: 0;
					overflow: hidden;
					float: right;
					margin: 0;
					padding: 0;

					&::after {
						display: none;
					}
				}
			}

			.p-name {
				height: 80rpx;
				line-height: 80rpx;
				width: 540rpx;
				box-sizing: border-box;
				border: 2rpx solid #eee;
				padding: 0 20rpx;
				border-radius: 6rpx;
				margin: 40rpx auto 0;

				.weui-input {
					height: 80rpx;
					line-height: 80rpx;
					width: 100%;
					font-size: 28rpx;
					color: #666;
				}
			}


		}

		.btn {
			width: 75%;
			border-radius: 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin: 40rpx auto 0;
			font-size: 28rpx;
			color: #fff;
			background-color: #FF7416;
			text-align: center;
		}

		.p-btn {
			width: 75%;
			border-radius: 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin: 40rpx auto 0;
			font-size: 28rpx;
			color: #fff;
			background-color: #FF7416;
			text-align: center;
		}
	}


	.mine {
		.imgs {
			width: 100%;
			height: 366rpx;
		}

		.mine_top {
			width: 750rpx;
			height: 650rpx;
			position: absolute;
			top: 0;

			.top_box {
				position: absolute;
				display: flex;
				bottom: 340rpx;
				left: 30rpx;
				align-items: center;

				.top_img {
					width: 140rpx;
					height: 140rpx;
					opacity: 1;
					margin: 0 auto;
					border-radius: 50%;
					overflow: hidden;
				}

				.flex_r {
					margin-left: 40rpx;
				}

				.top_text {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
				}

				.phone {
					text-align: center;
					font-size: 28rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
				}

				.btn {
					color: #666666;
					font-size: 20rpx;
					border-radius: 5rpx;
					margin-top: 20rpx;
					border: 1px solid #666666;
					background-color: #F9E2D9;
					padding: 0 20rpx;
				}
			}
		}

		.content {
			width: 710rpx;
			// top: 350rpx;
			// left: 50%;
			// transform: translate(-50%, 0);
			margin: -20rpx auto;

			.c_top {
				width: 100%;
				height: 285rpx;
				background: linear-gradient(23deg, #FFFBF9 0%, #FFF9F9 100%, #FFFBF8 100%);
				box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(0, 0, 0, 0.05);
				border-radius: 16rpx;
				box-sizing: border-box;
				padding: 50rpx 30rpx;
				z-index: 9;
				position: relative;

				.title {
					width: 140rpx;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					background-image: linear-gradient(20deg, #FFDFCC 0%, transparent 40%);
				}

				.flexs {
					display: flex;
					justify-content: space-between;
					text-align: center;
					margin-top: 40rpx;

					.box_img {
						width: 64rpx;
						height: 64rpx;
					}

					.texts {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #666666;
					}
				}


			}

			.fximg {
				margin-top: 20rpx;
				width: 710rpx;
				height: 140rpx;
				position: relative;

				.img {
					width: 710rpx;
					height: 140rpx;
				}

				.imgabs {
					width: 710rpx;
					top: 0%;
					position: absolute;
					padding: 30rpx 20rpx 30rpx 188rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;

					.t1 {
						font-family: JZY, JZY;
						font-weight: bold;
						font-size: 40rpx;
						color: #FFFFFF;
					}

					.t2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						margin-top: 6rpx;
					}

					.btn {
						width: 160rpx;
						height: 60rpx;
						background: #FA4700;
						border-radius: 60rpx 60rpx 60rpx 60rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 60rpx;
						text-align: center;
					}
				}

				.imgabs1 {
					width: 710rpx;
					top: 0%;
					position: absolute;
					padding: 26rpx 20rpx 0rpx 30rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
					}

					.t2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 40rpx;
						color: #FFFFFF;

						span {
							font-size: 24rpx;
							margin-left: 6rpx;
						}
					}

					.btn {
						width: 160rpx;
						height: 60rpx;
						background: linear-gradient(90deg, #454256 0%, #080F21 100%);
						border-radius: 60rpx 60rpx 60rpx 60rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 60rpx;
						text-align: center;
					}
				}
			}

			.types {
				background-color: #FFFFFF;
				padding: 10rpx 30rpx;
				margin-top: 20rpx;
				border-radius: 16rpx;
			}

			.list {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				margin: 50rpx 0rpx;
				position: relative;

				.btns {
					position: absolute;
					top: 0%;
					width: 100%;
					height: 60rpx;
					opacity: 0;
				}

				.left {
					display: flex;
					align-items: center;

					.l_img {
						width: 50rpx;
						height: 50rpx;
					}

					.l_text {
						font-size: 28rpx;
						font-weight: 700;
						color: #333333;
						margin-left: 32rpx;

						text {
							font-size: 26rpx;
						}
					}
				}

				.arrows {
					width: 14rpx;
					height: 14rpx;
					border-top: 4rpx solid #666666;
					border-right: 4rpx solid #666666;
					transform: rotate(45deg);
				}
			}
		}
	}
</style>